<template>
	<view class="navcolumn_item_cont "  >
					<view class="navcoloumn_item">
						<view class="navcoloumn_item_title">
							{{title}}
						</view>
						<text class = "navcoloumn_item_num">{{num}}</text>
						<text class="item_unit">{{unit}}</text>
					</view>
					<view class="navcolumn_item_btncont" @tap = "click()" >
						<view class="navcolumn_item_btn">
							<text>{{btntxt}}</text>
						</view>
					</view>
	</view>
</template>

<script>
	export default {
		props:{
			title:{
				type:String,
				default:"标题"
			},
			num:{
				type:Number,
				default:0,
			},
			
			unit:{
				type:String,
				default:"单位"
			},
			btntxt:{
				type:String,
				default:"相关操作"
			}
		},
		data() {
			return {
				
			};
		},
		methods:{
			click(){
				this.$emit('btnclick')
			}
		}
	}
</script>

<style scoped lang="scss">
.navcolumn_item_cont{
		width: 180rpx;
		display: flex;
		
		flex-direction: column;
		height: 103rpx;
	}

	.navcoloumn_item{
		display: flex;
		width: 100%;
		align-items: center;
	}
	.navcoloumn_item_title{
		margin-left: 14rpx;
		font-size: 28rpx;
	}
	.navcoloumn_item_num{
		color:#F8321D;
		font-size: 36rpx;
		padding-top: -10rpx;
		margin:0 4rpx 0 9rpx;
	}
	.item_unit{
		font-size: 22rpx;
		color: #999999;
		display: flex;
		align-items: center;
	}
	.navcolumn_item_btncont{
		margin-top: 14rpx;
		height: 100%;
	}
	.navcolumn_item_btn{
		height: 40rpx;
		width: 120rpx;
		display: flex;
		border: 1px solid #F8321D;
		color:#F8321D;
		border-radius: 8rpx;
		font-size: 20rpx;
		justify-content: center;
		align-items: center;
		
	}
</style>
